<template>
    <div
        class="appMainWarp"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <div class="CustomerRemarke">
            <!-- 客户标签信息维护 -->
            <el-form
                :inline="true"
                :model="formData"
                class="demo-form-inline padding_top15"
                size="small"
                label-width="120px"
            >
                <el-row>
                    <el-form-item label="来电号码">
                        <el-input v-model.trim="formData.phoneNumberOne" placeholder="请输入客户手机号"></el-input>
                    </el-form-item>

                    <el-form-item label="姓名">
                        <el-input v-model.trim="formData.custName" placeholder="请输入客户姓名"></el-input>
                    </el-form-item>

                    <el-form-item label="证件号码">
                        <el-input v-model.trim="formData.idNo" placeholder="请输入客户证件号"></el-input>
                    </el-form-item>

                    <el-form-item label="卡号">
                        <el-input v-model.trim="formData.cardNumberOne" placeholder="请输入客户卡号"></el-input>
                    </el-form-item>
                    <el-form-item label="客户类型">
                        <el-input v-model.trim="formData.custType" placeholder="请输入客户类型"></el-input>
                    </el-form-item>
                    <div class="inlineBtn">
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-search"
                            @click="hanlesearch"
                            class="searchBtn"
                        >查询</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-refresh-right"
                            @click="handleReset"
                            class="resetBtn"
                        >重置</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-circle-plus-outline"
                            @click="hanlePush"
                        >新增</el-button>
                    </div>
                </el-row>
            </el-form>
            <div class="text_center">
                <template>
                    <el-table
                        :data="tableData"
                        border
                        stripe
                        style="width:100%"
                        class="el-table heard-bg"
                    >
                        <el-table-column label="姓名" prop="custName" width="120px"></el-table-column>
                        <el-table-column label="性别" prop="sex" width="80px"></el-table-column>
                        <el-table-column label="联系方式 1" prop="phoneNumberOne" width="120px"></el-table-column>
                        <el-table-column label="联系方式 2" prop="phoneNumberTwo" width="120px"></el-table-column>
                        <el-table-column label="卡号1" prop="cardNumberOne" width="160px"></el-table-column>
                        <el-table-column label="卡号2" prop="cardNumberTwo" width="160px"></el-table-column>
                        <el-table-column label="证件号" prop="idNo" width="185px"></el-table-column>
                        <el-table-column label="客户类型" prop="custType" width="110px">
                            <template
                                slot-scope="scope"
                            >{{scope.row.custType|filter_custType(CUSTTYPE_option)}}</template>
                        </el-table-column>
                        <el-table-column label="职位" prop="position"></el-table-column>
                        <el-table-column label="部门" prop="dept"></el-table-column>
                        <el-table-column label="职位" prop="position"></el-table-column>
                        <el-table-column label="是否优先排队" prop="isPriorityQueue">
                            <template slot-scope="scope">{{scope.row.isPriorityQueue==='1'?'是':'否'}}</template>
                        </el-table-column>
                        <el-table-column label="优先级别" prop="priorityLevel">
                            <template
                                slot-scope="scope"
                            >{{scope.row.priorityLevel|filter_priorityLevel(priorityLevelOption)}}</template>
                        </el-table-column>
                        <el-table-column label="描述1" prop="remark"></el-table-column>
                        <el-table-column label="描述2" prop="remarkTwo"></el-table-column>
                        <!-- <el-table-column label="新建时间" prop="createTime"></el-table-column> -->
                        <!--<el-table-column label="操作员" prop="updateUser" width="120px"></el-table-column>-->
                        <el-table-column label="操作" width="120px">
                            <template slot-scope="scope">
                                <el-button
                                    @click.native.prevent="revamp(scope.$index,scope.row)"
                                    type="text"
                                >修改</el-button>
                                <el-button
                                    @click.native.prevent="deleteRow(scope.$index,scope.row)"
                                    type="text"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <Pagination
                        :hanleChangeCurrentPage="hanleChangeCurrentPage"
                        :handleChangeSize="handleChangeSize"
                        :currentPage="currentPage"
                        :pageSize="pageSize"
                        :total="total"
                    />
                </template>
            </div>
        </div>
        <div v-if="showDialogFrom">
            <customer-remarke-item
                :isTitleValue="isTitleValue"
                :updataInfocurres="updataInfocurres"
                :CUSTTYPE_option="CUSTTYPE_option"
                :priorityLevelOption="priorityLevelOption"
                @parnetFun="parnetFun"
            ></customer-remarke-item>
        </div>
    </div>
</template>
<script>
import CustomerRemarkeItem from './components/CustomerRemarkeItem.vue';
import Pagination from '@/components/Pagination/Pagination.vue';
import { closePage, getDictSelectList, } from '@/utils/Common';
export default {
    name: 'CustomerRemarke',
    data() {
        return {
            formData: {
                id: '',
                custName: '',
                sex: '',
                phoneNumberOne: '',
                idNo: '',
                custType: '',
                cardNumberOne: '',
            },
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            isTitleValue: '',
            total: 0,
            CUSTTYPE_option: [],//、、客户类型
            pageLoading: true,
            showDialogFrom: false,//浮动框 显示和隐藏
            updataInfocurres: {},//修改页面上送的值
            priorityLevelOption: [],//优先级别
        }
    },
    filters: {
        filter_custType(value, CUSTTYPE_option) {
            if (value) {
                let filterValue = '';
                CUSTTYPE_option.some((item) => {
                    if (item.code === value) {
                        filterValue = item.label;
                        return true;
                    }
                })
                return filterValue;
            }
        },
        filter_priorityLevel(value, priorityLevelOption) {
            if (value) {
                let filterValue = '';
                priorityLevelOption.some((item) => {
                    if (item.code === value) {
                        filterValue = item.label;
                        return true;
                    }
                })
                return filterValue;
            }
        },

    },
    components: { CustomerRemarkeItem, Pagination },
    async mounted() {
        await this.getinit();
        this.getInitData('1');
    },
    methods: {
        // 页面进入初始化页面数据
        async getinit() {
            this.CUSTTYPE_option = await getDictSelectList('CUST_TYPE', this);
            this.priorityLevelOption = await getDictSelectList('PRIORITY_LEVEL', this);
        },
        // 第一次进入 查所有的第一页
        // 获取参数表格数据
        getInitData(types) {
            let params = {};
            if (types == '1') {
                params = {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                };
            } else {
                params = {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    custName: this.formData.custName,
                    phoneNumber: this.formData.phoneNumberOne,
                    custType: this.formData.custType,
                    idNo: this.formData.idNo,
                    cardNumber: this.formData.cardNumberOne,
                };
            }

            // params = Object.assign({}, params);
            this.$post.customerRemarke.pageRemarke(params).then((res) => {
                console.log('res111111__', res);
                if (res.data.success) {
                    this.tableData = res.data.content.records;
                    this.total = res.data.content.total;
                }
            });
            this.pageLoading = false;
        },
        // 查询
        hanlesearch() {
            this.currentPage = 1;
            this.getInitData('2');
        },
        // 新增加
        hanlePush() {
            this.isTitleValue = '新增客户标签';
            if (!this.showDialogFrom) {
                this.showDialogFrom = true;
            } else {
                this.showDialogFrom = false;
            }
        },
        //重置
        handleReset() {
            this.currentPage = 1;
            this.pageSize = 10;
            this.formData.custName = '';
            this.formData.phoneNumberOne = '';
            this.formData.cardNumberOne = '';
            this.formData.idNo = '';
            this.formData.custType = '';
            this.tableData = [];
        },
        // 修改
        revamp(value, row) {
            this.isTitleValue = '修改客户标签';
            if (!this.showDialogFrom) {
                this.showDialogFrom = true;
            } else {
                this.showDialogFrom = false;
            }
            this.updataInfocurres = row;
        },
        // 删除
        async deleteRow(value, row) {
            await this.$confirm('确定是否删除当前数据', '删除提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                customClass: 'warning', type: 'warning',
            }).then(() => {
                this.getContactsQueryInfo(row.id);
            }, () => {

            });
        },
        getContactsQueryInfo(id) {
            let params = {
                id: id,
            };
            this.$post.customerRemarke.deleteRemarke(params).then((res) => {
                console.log('res111111__', res);
                if (res.data.success) {
                    this.$message.success('删除成功！');
                    this.currentPage = 1;
                    this.getInitData('1');
                } else {
                    this.$message.error('删除失败！');
                }
            }, () => {

            });
        },
        // 子组件 给父组件传值 传方法
        parnetFun() {
            this.showDialogFrom = false;
            this.currentPage = 1;
            this.getInitData('1');
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            console.log('this.currentPage', val);
            this.currentPage = val;
            this.getInitData('2');
            this.tableData = [];
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            console.log('pageSize', val);
            this.pageSize = val;
            this.getInitData('2');
            this.tableData = [];
            console.log('this.pageSize', this.pageSize);
        },
    },
}
</script>
<style scoped lang="scss" >
.CustomerRemarke {
    height: 80%;
    text-align: left;
    .text_center {
        width: 97%;
        margin: 0 auto;
        padding-bottom: 20px;
    }
    .el-table {
        margin-top: 10px;
    }
}
</style>